<template>
    <div>
        <script :id='randomId' type="text/plain"></script>
    </div>
</template>
<script>
import '@/../static/UE/ueditor.config.js'
import '@/../static/UE/ueditor.all.js'
import '@/../static/UE/lang/zh-cn/zh-cn.js'
import '@/../static/UE/ueditor.parse.js'
import '@/../static/UE/dialogs/xiumi-ue-dialog-v5.js'
import '@/../static/UE/dialogs/xiumi-ue-v5.css'
import toolbars from './config'
export default {
    name: 'UE',
    data() {
        return {
            randomId: 'editor_' + Date.now(),
            editor: null,
            ready: false
        }
    },
    props: {
        defaultMsg: {
            type: String
        },
        config: {
            type: String,
            default: ''
        },
    },
    computed: {
        value: {
            get() {
                return this.defaultMsg
            },
            set(val) {
                this.$emit("update:defaultMsg", val)
            }
        }
    },
    mounted() {
        let tools = JSON.parse(JSON.stringify(toolbars))
        if(this.config){
            tools[0].push(this.config)
        }else{
            tools[0].push('vupload')
        }
        let conf = {initialFrameWidth: null, initialFrameHeight: 350, toolbars: tools}
        this.editor = UE.getEditor(this.randomId, conf, this); // 初始化UE
        this.editor.addListener("ready", () => {
            this.ready = true
            this.editor.setContent(this.value); // 确保UE加载完成后，放入内容。
        });
    },
    methods: {
        getContent() { // 获取内容方法
            return this.editor.getContent()
        },
        getUEContentTxt() { // 获取纯文本内容方法
            return this.editor.getContentTxt()
        },
        addToContent(val) {//追加内容
            this.editor.setContent(val, true);
        },
        setContent(val) {
            if (this.ready) {
                this.editor.setContent(val)
            } else {
                this.editor.addListener("ready", () => {
                    this.editor.setContent(val); // 确保UE加载完成后，放入内容。
                });
            }
        },
        clear() {
            this.editor.setContent('');
        }
    },
    destroyed() {
        this.editor.destroy();
    }
}
</script>
